<template>
    <div class="rootMain">
        <el-collapse v-model="activeName" accordion @change="change">
            <el-collapse-item
                v-for="(item, index) in titleData"
                :key="index"
                :title="item.title"
                :name="item.id"
            >
                <div class="list">
                    <div class="item">
                        <div class="item-letf">税目</div>
                        <div class="item-right">税率</div>
                    </div>
                    <div
                        v-for="(item, index) in detailData"
                        :key="index"
                        class="item"
                    >
                        <div class="item3">
                            {{ item.name }}
                        </div>
                        <div class="item4">
                            {{ item.tax }}
                        </div>
                    </div>
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
import {
    vatList,
    consumeList,
    cityKeepList,
    tobaccoTaxList,
    resourceList,
    landList,
    homeList,
    deedTax,
    carTax,
    stampDuty,
    incomeTax,
    incomeTax2
} from "@/assets/utils/vat.js";
export default {
    name: "taxcount",
    props: {
        item: {
            type: Object,
            default: () => {
                return {};
            },
        },
    },
    data() {
        return {
            activeName: "",
            titleData: [
                {
                    id: 0,
                    title: "增值税",
                },
                {
                    id: 1,
                    title: "消费税",
                },
                {
                    id: 2,
                    title: "城市维护建设税",
                },
                {
                    id: 3,
                    title: "烟叶税",
                },
                {
                    id: 4,
                    title: "资源税",
                },
                {
                    id: 5,
                    title: "耕地占用税",
                },
                {
                    id: 6,
                    title: "房产税",
                },
                {
                    id: 7,
                    title: "契税",
                },
                {
                    id: 8,
                    title: "车辆购置税",
                },
                {
                    id: 9,
                    title: "印花税",
                },
                {
                    id: 10,
                    title: "企业所得税",
                },
                {
                    id: 11,
                    title: "电子烟",
                },
            ],
            detailData: [],
        };
    },
    watch: {},
    created() {},
    mounted() {},
    computed: {},
    methods: {
        message(m) {
            this.$message({
                message: m,
                type: "warning",
            });
        },
        change(e) {
            console.log(e);
            if (e == 0) {
                this.detailData = vatList;
            } else if (e == 1) {
                this.detailData = consumeList;
            } else if (e == 2) {
                this.detailData = cityKeepList;
            } else if (e == 3) {
                this.detailData = tobaccoTaxList;
            } else if (e == 4) {
                this.detailData = resourceList;
            } else if (e == 5) {
                this.detailData = landList;
            } else if (e == 6) {
                this.detailData = homeList;
            } else if (e == 7) {
                this.detailData = deedTax;
            } else if (e == 8) {
                this.detailData = carTax;
            } else if (e == 9) {
                this.detailData = stampDuty;
            } else if (e == 10) {
                this.detailData = incomeTax;
            } else if (e == 11) {
                this.detailData = incomeTax2;
            }
            console.log(this.detailData);
        },
    },
};
</script>

<style lang="scss" scoped>
.rootMain {
    padding: 20px 22px;
}
.list {
    .item {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        padding: 10px 0;
        font-size: 14px;
        color: #606266;
        div {
            max-width: 70%;
        }
        &:hover {
            background-color: #f2f6fc;
        }
    }
}

.item-letf {
    text-align: left;
    color: #1c87f3;
}

.item-right {
    text-align: right;
    color: #1c87f3;
}

.item3 {
    text-align: left;
}

.item4 {
    text-align: right;
    color: #f56c6c;
}
</style>
